<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AJAX</title>
  <style type="text/css" media="screen">
       body
       {
            font: 11px arial;
       }
       .divmessage 
       {
	    border-right-width: 1px;
	    border-bottom-width: 1px;
	    border-left-width: 1px;
	    border-right-style: solid;
	    border-bottom-style: solid;
	    border-left-style: solid;
	    border-right-color: #000000;
	    border-bottom-color: #000000;
	    border-left-color: #000000;	 
	 
	    font: 11px arial; 
       }
       .textarea
       {
	    	
	    	border:1px solid #E8F2FE;
       }
       .suggest_link
       {
       font: 11px arial;
            background-color: #FFFFFF;
            padding: 2px 6px 2px 6px;
       }
      .suggest_link_over
       {
       font: 11px arial;
            background-color: #E8F2FE;
            padding: 2px 6px 2px 6px;
       }
        #search_suggest
       {
            position: absolute;
            background-color: #FFFFFF;
            text-align: left;
            border: 1px solid #000000;
       }
    </style>
    <script type="text/javascript">  
      var xmlHttp;
      
      function inputSuggest() {  
        
    	  if (window.XMLHttpRequest)
    	  {
    		//border: 1px solid #C18E17;
    	  // code for IE7+, Firefox, Chrome, Opera, Safari
    	  xmlHttp=new XMLHttpRequest();
    	  }
    	  else if (window.ActiveXObject)
    	  {
    	  // code for IE6, IE5
          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    	  }
    	  else
    	  {
    	  alert ("Browser does not support HTTP Request");
    	  return;
    	  }
    	  var textValue=document.getElementById("UserName").value; 
    	  if(textValue.length==0||textValue==null||is_blank(textValue))
              {
            
        	    document.getElementById("result").innerHTML="";
        	    document.getElementById("result").style.display="none" ; 
                return ;
              }
         
        	 
        
          var url="AjaxServlet?UserName="+textValue;
          xmlHttp.onreadystatechange = stateChanged;   
          xmlHttp.open("GET",url,true); 
          xmlHttp.send(null);  
      }  
      function stateChanged() {  
         if(xmlHttp.readyState==4){ 
             var str = xmlHttp.responseText.split("#");
             var s = document.getElementById("result");
             s.innerHTML="";
             if(str==""||str==null)
            	 document.getElementById("result").style.display="none";
        	 for(i=0; i < str.length - 1; i++) {  
        		 document.getElementById("result").style.display="block";
        	   divposition();
               var suggest = '<div onmouseover="onmouseOver(this);" ';  
               suggest += 'onmouseout="onmousetOut(this);" ';  
               suggest += 'onclick="setSuggestValue(this.innerHTML);" ';  
               suggest += 'class="suggest_link">' + str[i] + '</div>';  
               s.innerHTML += suggest;  
             }  
         }
      }
      function is_blank(str){
  		var reg = /^\s*$/;
  		return reg.test(str);
  	}
      function onmouseOver(div) {  
          div.className = 'suggest_link_over';  
      }  
      function onmousetOut(div) {  
          div.className = 'suggest_link';  
      }  
      
      function setSuggestValue(value) {  
    	  document.getElementById("UserName").value = value; 
    	  document.getElementById("result").style.display="none" ; 
    	  document.getElementById("result").innerHTML="";  
      }  
            
      function divposition(){
          var textp =document.getElementById("UserName");
          var divp =document.getElementById("result");
          divp.style.left=getElementX(textp)+"px";
          divp.style.top=getElementY(textp)+20+"px";
        
      }
      function getElementY(element){ var targetTop = 0; 
      if (element.offsetParent) 
      { while (element.offsetParent) 
      { targetTop += element.offsetTop; 
      element = element.offsetParent; 
      }
      }
      else if (element.y)
      { targetTop += element.y; }
      return targetTop; 
      } 
      
      function getElementX(element){ 
    	  var targetLeft = 0;
    	  if (element.offsetParent) { 
    	    while (element.offsetParent) { 
    	        targetLeft += element.offsetLeft; 
    	        element = element.offsetParent;
    	    } 
    	  } 
    	  else if (element.y) { 
    	  targetLeft += element.x;
    	  } 
    	  return targetLeft;
      }   
    
    </script>
</head>

<body>
     <table width="200" border="0" cellspacing="0" cellspacing="0">
  <tr>
    <td><input type="text" id="UserName" class="textarea" name="UserName" onkeyup="inputSuggest()"style="width:200px" />
    <div  id="result" class="divmessage"  style="display:none" ></div></td>
  </tr>
  </table>
    
     
</body>
</html>
                  